<template>
  <view class="map-container">
    <view class="header">
      <img src="../../static//社区公告.png" alt="" />
      <view class="text">
        <h3>报修、投票一键直达</h3>
        <view class="info">业主诉求一键反馈，生活难题随时解决。</view>
        <view class="info_s">致力于创建更好的小区系统</view>
      </view>
    </view>
  </view>
  <view class="bulletin">
    <view class="bulletin-head">
      <view style="color: #fda261">社区</view>
      <view>公告</view>
    </view>
    <view class="bulletin-body">
      <view style="color: #fda261">最新</view>
      <view style="margin-left: 10rpx">KK小程序管理后台已上线</view>
    </view>
  </view>
  <view class="menu">
    <view
      v-for="(item, index) in menu"
      :key="index"
      class="menu-item"
      @click="onClickMenuItem(item.id)"
    >
      <image :src="item.url" class="menu-img" mode="aspectFill"></image>
      <text class="menu-text">{{ item.name }}</text>
    </view>
  </view>
  <view class="prompt">
    <image
      src="https://cdn-icons-png.flaticon.com/128/609/609803.png"
      mode="scaleToFill"
      class="prompt-icon"
    />
    <view>精选房源</view>
  </view>
  <view class="house-list">
    <view
      v-for="(item, index) in houselist"
      :key="index"
      class="item"
      @click="toHouseInfo(item.house_id)"
    >
      <image
        :src="
          item?.house_img !== null
            ? base64ToBlobUrl(item?.house_img as string)
            : 'https://img95.699pic.com/photo/50149/6896.jpg_wh860.jpg'
        "
        class="house-img"
      />
      <view class="info">
        <text class="desc">{{ item.house_desc }}</text>
        <view class="price">价格：￥100</view>
      </view>
    </view>
  </view>
  <view class="repair">
    <up-popup v-model:show="show" mode="center" class="repair-pop" :round="10">
      <view class="form">
        <view class="label">
          <view>单元号</view>
          <view>详细描述</view>
          <view>图片</view>
        </view>
        <view class="input">
          <up-input
            placeholder="请输入单元"
            border="bottom"
            clearable
            class="input-item"
            v-model="house_id"
          ></up-input>
          <up-input
            placeholder="请输入详细描述"
            border="bottom"
            clearable
            class="input-des"
            v-model="repairs_desc"
          ></up-input>
          <up-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="10"
            class="up-file"
          ></up-upload>
        </view>
      </view>
      <button
        @click="submit"
        style="
          background-color: #fda261;
          color: #fff;
          width: 95%;
          margin: 0 auto;
          margin-bottom: 10rpx;
        "
      >
        提交
      </button>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { onMounted } from 'vue'
import { ref } from 'vue'
import { houseList } from '@/api/home'
import { base64ToBlobUrl } from '@/common/img'
import type { HomeMenu, HouseList } from '@/types/homePage'

const show = ref(false)

const menu = ref<HomeMenu[]>([
  {
    id: 1,
    name: '社区活动',
    url: 'https://cdn-icons-png.flaticon.com/512/4474/4474452.png'
  },
  {
    id: 2,
    name: '业主投票',
    url: 'https://cdn-icons-png.flaticon.com/512/6037/6037543.png'
  },
  {
    id: 3,
    name: '物业报修',
    url: 'https://cdn-icons-png.flaticon.com/512/4354/4354692.png'
  },
  {
    id: 4,
    name: '小区规范',
    url: 'https://cdn-icons-png.flaticon.com/512/2669/2669864.png'
  },
  {
    id: 5,
    name: '业委通告',
    url: 'https://cdn-icons-png.flaticon.com/512/4306/4306653.png'
  },
  {
    id: 6,
    name: '物业缴费',
    url: 'https://cdn-icons-png.flaticon.com/512/625/625599.png'
  },
  {
    id: 7,
    name: '智慧停车',
    url: 'https://cdn-icons-png.flaticon.com/128/16484/16484334.png'
  },
  {
    id: 8,
    name: '小区代购',
    url: 'https://cdn-icons-png.flaticon.com/128/6833/6833470.png'
  }
])

const houselist = ref<HouseList[]>([])

const onClickMenuItem = (id: number) => {
  if (id === 1) {
    uni.switchTab({ url: '/pages/activity/activityPage' })
  } else if (id === 2) {
    uni.navigateTo({ url: '/pages/others/votePage' })
  } else if (id === 3) {
    show.value = true
  } else if (id === 4) {
    uni.navigateTo({ url: `/pages/others/normList?id=${1}` })
  } else if (id === 5) {
    uni.navigateTo({ url: `/pages/others/normList?id=${2}` })
  } else if (id === 6) {
    uni.navigateTo({ url: '/pages/others/costPage' })
  } else {
    uni.showToast({
      title: '开发中...',
      icon: 'none'
    })
  }
}

const toHouseInfo = (id: number) => {
  uni.navigateTo({ url: '/pages/others/houseInfo?id=' + id })
}

// 图片操作
const fileList = ref<any>([])

// 删除图片
const deletePic = (event: any) => {
  fileList.value.splice(event.index, 1)
}

// 新增图片
const afterRead = async (event: any) => {
  fileList.value = event.file
}

const house_id = ref(0)
const repairs_desc = ref('')

const submit = () => {
  uni.uploadFile({
    url: 'http://localhost:8080/report', //服务器地址
    fileType: 'image', //ZFB必填,不然报错
    filePath: fileList.value[0].path, //文件路径
    name: 'imgFile',
    header: {
      Authorization: `Bearer ${uni.getStorageSync('token')}`
    },
    formData: {
      house_id: house_id.value,
      repairs_desc: repairs_desc.value
    },
    success: (uploadFileRes) => {
      console.log(uploadFileRes)
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      house_id.value = 0
      repairs_desc.value = ''
      show.value = false
    }
  })
}

onLoad(() => {
  uni.setNavigationBarTitle({
    title: 'KK物业'
  })
})

onMounted(async () => {
  const res = await houseList({
    page: 1,
    size: 5
  })
  houselist.value = res.data
})
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 30vh;
  background-color: #fda261;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header {
  width: 100%;
  height: 60%;
  display: flex;
  margin-bottom: 60rpx;

  .text {
    font-size: 30rpx;
    color: #fff;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .info {
      margin-top: 20rpx;
      width: 85%;
    }

    .info_s {
      font-size: 22rpx;
      margin-top: 20rpx;
    }
  }
}

.map-container img {
  width: 40%;
  padding: 60rpx 40rpx;
}

.bulletin {
  width: 96vw;
  height: 160rpx;
  background-color: #fff;
  margin: 0 auto;
  margin-top: -80rpx;
  // 设置阴影
  box-shadow: 0px 1px 1px #b3b3b3;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;

  .bulletin-head {
    width: 20%;
    height: auto;
    padding: 20rpx 0 20rpx 40rpx;
    font-size: 40rpx;
  }

  .bulletin-body {
    width: 80%;
    height: auto;
    font-size: 36rpx;
    display: flex;
    align-items: center;
    padding: 0 12rpx;
  }
}

.menu {
  width: 95vw;
  margin: 0 auto;
  height: auto;
  display: flex;
  flex-wrap: wrap;

  // justify-content: space-between;
  .menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40rpx 20rpx;

    .menu-img {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 20rpx;
    }
  }
}

.prompt {
  width: 96vw;
  margin: 0 auto;
  height: auto;
  font-size: 34rpx;
  font-weight: 900;
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;

  .prompt-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
  }
}

.house-list {
  width: 95vw;
  margin: 0 auto;
  margin-top: 20rpx;

  .item {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    background-color: #fbfcff;
    border-radius: 8rpx;

    .house-img {
      width: 300rpx;
      height: 200rpx;
      border-radius: 2%;
    }

    .info {
      width: calc(95vw - 340rpx);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .desc {
        font-size: 40rpx;
      }

      .price {
        font-size: 32rpx;
        color: #fda261;
        margin-top: 40rpx;
      }
    }
  }
}

.repair {
  width: 100%;
  height: auto;

  .repair-pop {
    background-color: #fff;

    .form {
      width: 100%;
      height: auto;
      padding: 10rpx;
      display: flex;
      justify-content: space-between;

      .label {
        width: 26%;
        padding: 0 10rpx;
        text-align: right;

        view {
          height: 50rpx;
          padding: 15rpx 0;
        }
      }

      .input {
        width: 74%;
        padding-right: 30rpx;

        .up-file {
          margin-top: 30rpx;
        }
      }
    }
  }
}
</style>
